<template>
  <div class="upload-list">
    <el-button
      type="primary"
      class="el-icon-plus"
      plain
      style="margin-bottom: 10px; width: 100%;"
    >
      添加行程
    </el-button>
    <div
      @mouseenter="$event.currentTarget.className = 'hover upload-list-item'"
      @mouseleave="$event.currentTarget.className = 'upload-list-item'"
      class="upload-list-item"
      v-for="item in init"
      :key="item.pa_id"
    >
      <router-link
        :to="
          item.iswrite === 0
            ? `/home/travelTabel/${item.pa_id}?title=${item.pa_title}&user=${userId}&state=${item.iswrite}`
            : '#'
        "
      >
        <el-tooltip
          effect="dark"
          content="该收集表已填写"
          placement="top"
          :disabled="item.iswrite === 0 ? true : false"
        >
          <div :class="item.iswrite === 1 ? 'iswrite' : null">
            <el-descriptions :title="item.pa_title">
              <template v-for="(i, k) in list">
                <el-descriptions-item
                  v-if="item[i.value] !== null"
                  :label="i.name"
                  :key="k"
                >
                  <span style="margin-right: 15px;">
                    {{ item[i.value] | formatDate }}
                  </span>
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </div>
        </el-tooltip>
      </router-link>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageCount"
      :page-sizes="[10, 100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tatal"
      class="upload-list-pagination"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用户id
      userId: 1,
      // 初始化数据
      init: [
        {
          name: '管理员2',
          iswrite: 0,
          pa_id: 7,
          pa_title: '请上传2月28日的行程',
          pa_time: '2023-02-28T17:31:09.000Z',
          pa_content: null,
        },
        {
          name: '管理员1',
          iswrite: 1,
          pa_id: 6,
          pa_title: '请上传2月29日的行程',
          pa_time: '2023-02-28T17:31:02.000Z',
          pa_content: null,
        },
        {
          name: '管理员3',
          iswrite: 0,
          pa_id: 4,
          pa_title: '请上传2月15日的行程',
          pa_time: '2023-02-28T17:31:00.000Z',
          pa_content: '情况紧急，请大家积极配合，减轻社区志愿者的排查工作',
        },
        {
          name: '管理员3',
          iswrite: 1,
          pa_id: 5,
          pa_title: '请上传2月1日的行程',
          pa_time: '2023-02-28T17:30:56.000Z',
          pa_content: '麻烦大家上传一下当日的行程',
        },
        {
          name: '管理员8',
          iswrite: 1,
          pa_id: 3,
          pa_title: '请上传2月2日的行程',
          pa_time: '2023-02-28T17:30:53.000Z',
          pa_content: '麻烦大家上传一下当日的行程',
        },
        {
          name: '管理员8',
          iswrite: 0,
          pa_id: 2,
          pa_title: '行程上报',
          pa_time: '2023-02-28T17:30:51.000Z',
        },
        {
          name: '管理员2',
          iswrite: 1,
          pa_id: 1,
          pa_title: '行程上报',
          pa_time: '2023-02-28T17:30:48.000Z',
        },
      ],
      // 显示数据 , ,
      list: [
        { name: '发布者', value: 'name' },
        { name: '备注', value: 'pa_content' },
        { name: '时间', value: 'pa_time' },
      ],
      form: [null, '', undefined, '555', ''],
      tatal: 10, //总数据
      pageCount: 1, // 页数
      pageSize: 10, // 页的大小
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    dialog(sureCallback, cencelCallback) {
      new Promise((resolve, reject) => {
        this.show()
          .then(() => {
            // 确定
            sureCallback()
            resolve()
          })
          .catch(() => {
            // 取消
            cencelCallback()
            reject()
          })
      })
    },
    add() {
      this.dialog(
        function clickSrue() {
          console.log('点击了确定')
        },
        function clickCencel() {
          console.log('点击取消')
        },
      )
    },
    deleteAll() {
      this.dialog(
        () => {
          console.log('确认全部删除')
        },
        () => {
          console.log('取消全部删除')
        },
      )
    },
  },
}
</script>

<style lang="less" scoped>
.upload-list {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tip-item-span {
    margin-right: 0.9375rem;
    &:last-child {
      margin-right: 0;
    }
  }
}
.hover {
  box-shadow: 0px 0px 4px 4px rgb(232 237 250), 1px 1px 0px 0px rgb(232 237 250);
}
</style>
